<template>
  <div class="flex w-full h-screen relative">
    <div :class="headerClass" class="transition-[width] duration-150 ease-linear bg-[#EBEEF5] h-screen z-80 sm:w-[200px] sm:static"/>
    <div v-if="!isMobile" @click="showHeader" class="sm:hidden bg-black/40 block absolute inset-0 z-30 left-0 top-0"/>
    <div class="flex-1 flex flex-col">
      <header class="p-2 w-auto h-[40px] bg-[#E4E7ED] flex items-center justify-start sm:hidden">
        <el-icon @click="headerClick" class="single-uploader__icon cursor-pointer"><i-ep-expand /></el-icon>
      </header>
      <main class="flex-1 overflow-hidden bg-[#d3dce6]">
        <tailwind @click-child="clickChild" :arr="arr"/>
      </main>
      <footer class="p-2 sticky left-0 bottom-0 right-0 overflow-hidden bg-[#E4E7ED] h-[40px]"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import Tailwind from "@/components/tailwind.vue";
import { useBasicLayout } from "@/hooks/useBasicLayout";

const { isMobile } = useBasicLayout();

interface Item {
  id: number;
  name: string;
}

const arr = reactive<Item[]>([
  {
    id: 1,
    name: 'item',
  }, {
    id: 2,
    name: 'item',
  }, {
    id: 3,
    name: 'item',
  }, {
    id: 4,
    name: 'item',
  }]
)

const headerClass = computed(() => ({
  'absolute': true,
  'h-full': true,
  'top-0': true,
  'left-0': true,
  'z-40': true,
  'inset-0': true,
  'w-3/5': !isMobile.value,
  'w-0': isMobile.value
}));

const headerClick = () => {
  isMobile.value = !isMobile.value;
}

const showHeader = () => {
  isMobile.value = true;
}

const clickChild = (item: Object) => {
  console.log(item);
}
</script>
